const tbody = document.querySelector('tbody')


async function getScore() {
    // 发送请求
    const result = await axios({
        url: '/score/list',
        method: 'get',

    })
    // console.log(result)

    // 返回码0成功就执行渲染
    if (result.data.code === 0) {


        let html = ``
        // toastr.success(result.data.message)
        const data = result.data.data

        // console.log(data)

        for (const key in data) {
            html += `
        <tr data-stu_id='${key}'>
        <th scope="row">${key}</th>
        <td>${data[key].name}</td>
        <td class="score" data-batch='1'>${data[key].score[0]}</td>
        <td class="score" data-batch='2'>${data[key].score[1]}</td>
        <td class="score" data-batch='3'>${data[key].score[2]}</td>
        <td class="score" data-batch='4'>${data[key].score[3]}</td>
        <td class="score" data-batch='5'>${data[key].score[4]}</td>
      </tr>
            `
        }

        tbody.innerHTML = html
    }

}
getScore()
// 添加双击事件
tbody.addEventListener('dblclick', function (e) {

    // 通过事件委托，双击选中自定义属性修改成绩
    if (e.target.classList.contains('score')) {
        const input = document.createElement('input')
        // input的type类型
        input.type = 'text'
        e.target.append(input)
        input.style.display = 'block'
        // 这里input被cssdisplay隐藏了
        input.value = e.target.innerText
        // 让input标签自动获取焦点
        input.focus()

        // 键盘弹起事件
        input.addEventListener('keyup', async function (eve) {
            if (eve.key === 'Enter') {
                blurfunc()
                // 解绑焦点事件
                input.removeEventListener('blur', blurfunc)
            }
            // 失去焦点事件
            input.addEventListener('blur', blurfunc)
        })

        async function blurfunc() {
            e.target.innerText = input.value
            // input.style.display = 'none'
            const { stu_id } = e.target.parentNode.dataset
            const { batch } = e.target.dataset

            const result = await axios({
                url: '/score/entry',
                method: 'post',
                data: {
                    stu_id,
                    batch,
                    score: e.target.innerText,
                }
            })

            // console.log(result)
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                // 修改成功重新渲染
                getScore()
            }

        }
    }




}) 
